<template>
  <div>
    <div class="container">
      <div class="row mar">
        <div class="col-6">
          <img src="../../public/img/29.jpg" alt="" width="350" height="350" class="rounded-circle">
        </div>
        <div class="col-6 sty">
          <h3>中国传统的中式风格非常讲究空间的层次感，吸引着我们，所以装修时常常会用到“屏风”或“博古架”,来分隔室内空间。</h3>
          <p>
            也没有任何人属于他自己想要获得的，只能独自承受痛苦，痛苦的痛苦，但由于他们没有什么伟大的东西，在工作和痛苦中永远无法依附于寻求自己的痛苦，就像跌倒的时代一样。
            但是我必须向您解释所有这种指责享乐和赞美痛苦的错误观念是如何产生的，是对系统的完整解释，并阐述了伟大的真理探索者的实际教义，并将在人类幸福的总造者中得到体现。但这需要简单容易的区分。
          </p>
          <ul class="ul">
            <li v-for="(key,val) in uls" :key="val">{{key.mask}} <span>{{key.content}}</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div :class="key.clas" v-for="(key,val) in lunbo" :key="val">
          <img :src="key.img" class="d-block w-100" alt="" height="620">
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="container">
      <div class="row mar">
        <div class="col-md-3" v-for="(key,val) in con" :key="val">
          <img :src="key.img" alt="" class="rounded-circle" width="250" height="250">
          <p>{{key.txt}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
      data(){
          return {
            con:[],
            uls:[],
            lunbo:[]
          }
      },
      mounted(){
          this.$axios('http://localhost:3000/about').then((data)=>{
            console.log(data);
            this.con=JSON.parse(data.data[0].con);
            this.uls=JSON.parse(data.data[0].uls);
            this.lunbo=JSON.parse(data.data[0].lunbo);
          })
      }
  }

</script>

<style lang="less" scoped>
  .mar{margin: 7rem 0 4rem;}
  .mar p{margin-top: 2rem;
    font-size: 14px;
    color: #9B9B9B;
    line-height: 1.8em;}
  ul{list-style: none;padding: 0;}
  .sty h3{font-weight: 300;
    font-size: 1.4rem;
    color: #F43C82;
  }
  .sty p{margin: 1em 0;
    font-size: 14px;
    color: #9B9B9B;
    line-height: 1.8em;}
  .ul li{color: #000000}
  .ul span:hover{color: #FF9BC1}
</style>
